<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>删除广告例子</title>
	</head>
	<body>
		<div class="adv"></div>

		<script>
			// 1.【要先 创建监听器】监听adv元素中的变化（子节点以及后代节点）
			const ob = new MutationObserver((mutations) => {
				console.log('mutations', mutations[0].addedNodes)
				mutations[0].addedNodes.forEach((adv) => {
					setTimeout(() => {
						adv.remove()
						ob.disconnect() // 停止观察（释放资源）
					}, 1000)
				})
			})

			// 2.【再 获取要监听的元素 和 设置监听类型】
			const adv = document.querySelector('.adv')

			ob.observe(adv, {
				attributes: true,
				childList: true,
				subtree: true,
			})

			// 创建并添加广告元素
			const ad = document.createElement('div')
			ad.textContent = '这是一个弹窗广告'
			ad.style.cssText = `width:100px; height:100px; border:1px solid red; background:pink;`
			adv.appendChild(ad)
		</script>
	</body>
</html>
